<template>
  <div class="app-tags">
    <!-- <el-radio-group v-model="activeName" @change="handleClick">
      <el-radio-button label="index">组织架构</el-radio-button>
      <el-radio-button label="position">岗位管理</el-radio-button>
      <el-radio-button label="positionLevel">岗位级别</el-radio-button>
    </el-radio-group> -->

    <div
      v-for="item in tabs"
      :key="item.key"
      class="app-tag-item"
      :class="{ active: activeName === item.key }"
      @click="handleClick(item.key)"
    >
      <span class="tag-name">{{ item.name }}</span>
      <span class="tag-line"></span>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'AppTags',
    data() {
      return {
        activeName: 'index',
        tabs: [
          {
            key: 'index',
            name: '组织架构',
          },
          {
            key: 'position',
            name: '岗位管理',
          },
          {
            key: 'positionLevel',
            name: '岗位级别',
          },
          {
            key: 'info',
            name: '我的企业',
          },
        ],
      };
    },
    methods: {
      handleClick(name) {
        if (this.activeName !== name) {
          this.activeName = name;
          this.$router.push({ name });
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  $height: 50px;
  .app-tags {
    background-color: #ffffff;
    border-radius: 5px;
    height: $height;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  .app-tag-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    cursor: pointer;
    font-weight: bold;
    .tag-name {
      height: $height;
      line-height: $height;
    }
    .tag-line {
      height: 2px;
      width: 24px;
      display: block;
    }
    &.active,
    &:hover {
      color: #3770eb;
      > .tag-line {
        background: #3770eb;
      }
    }
  }
</style>
